<template>
    <div class="tiny_test">
      <editor id="tinymce" v-model="tinymceHtml" :init="editorInit"></editor>
      <div @click="show_insert">我输入了啥</div>
    </div>
</template>

<script>
  import tinymce from 'tinymce/tinymce'
  import   'tinymce/plugins/image'
  import   'tinymce/plugins/lists'
  import   'tinymce/plugins/image'
  import   'tinymce/plugins/code'
  import   'tinymce/plugins/table'
  import   'tinymce/plugins/colorpicker'
  import   'tinymce/plugins/textcolor'
  import   'tinymce/plugins/wordcount'
  import   'tinymce/plugins/contextmenu'
  import 'tinymce/themes/modern/theme'
  import Editor from '@tinymce/tinymce-vue'
  //import './socket.io.js'
  import io from 'socket.io-client';
    export default {
      name: "tinymce_doc",
      data() {
          return {
            tinymceHtml:'',
            socket:'',
            editorInit: {
              language_url: '/static/tinymce/zh_CN.js',
              language: 'zh_CN',
              skin_url: '/static/tinymce/skins/lightgray',
              height: 300,
            //  plugins: 'link lists image code table colorpicker textcolor wordcount contextmenu',
              toolbar:
                ' mybutton | undo redo |  removeformat | formatselect | bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | link unlink image code ',
              branding: false,
              setup: function (editor) {
                editor.addButton('mybutton', {
                  text: 'My button',
                  icon: false,
                  onclick: function () {
                    editor.insertContent('&nbsp;<b>It\'s my button!</b>&nbsp;');
                  }
                });
              }
            }
          }
      },
      mounted() {
        tinymce.init({})
        let _this = this
        this.get_webSocket()
        this.socket.on('message', function(msg){
          _this.tinymceHtml = msg
        });
      },
      watch:{
        /*tinymceHtml(newVal,oldVal){
          console.log('tinymceHtml变了')
          this.socket.emit('message',this.tinymceHtml );
          this.tinymceHtml = newVal
        }*/
      },
      methods: {
        show_insert(){
          this.socket.emit('message',this.tinymceHtml );
        },
        get_webSocket(){
          this.socket = io('http://localhost:3001');

        }
      },
      components:{
        Editor
      }
    }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">


</style>
